<template>
    <mu-card class="member">
        <mu-card-media>
            <mu-tabs :value="activeName"
                     @change="onTabChanged">
                <template v-for="route_link in member_routes">
                    <mu-tab :title="route_link.title"
                            :value="route_link.path"></mu-tab>
                </template>
            </mu-tabs>
        </mu-card-media>
        <mu-card-text>
            <router-view></router-view>
        </mu-card-text>
    </mu-card>
</template>
<script>
export default {
    data() {
        return {
            member_routes: this.$router.options.routes.find(option => option.path === "/admin").children.find(child_opt => child_opt.path === "member").children.map(member_link => {
                return {
                    path: member_link.path,
                    title: member_link.title
                }
            }),
            activeName: this.$route.meta.path
        }
    },
    created() {
    },
    methods: {
        onTabChanged(tab, e) {
            console.log("tab", tab)
            this.$router.push(tab)
        }
    },
    watch: {
        "$route.meta.path"(activeName) {
            this.activeName = activeName;
        }
    }
}
</script>